import React from "react";
import GeekIcon from "@shared/geekIcon";
import { SearchKey } from "@slice/searchKey";
import { useNavigate } from "react-router-dom";
import { removeKey } from "@slice/searchKey";
import { useTypedDispatch } from "@store/index";


interface Props {
    searchKey: SearchKey;
}


export default function SearchKeyItem({ searchKey }: Props) {

    const navigate = useNavigate();
    // 获取 dispatch 方法
    const dispatch = useTypedDispatch();

    return (
        <li>
            <span style={{width:"100%"}} onClick={() => {
                navigate(`/result/${searchKey.name}`);
            }}>
                {searchKey.name}
            </span>
            <span>
                <GeekIcon type={"iconbtn_essay_close"} onClick={() => dispatch(removeKey({ id: searchKey.id }))} />
            </span>
        </li>
    );
}